<template>
  <div class="mine">
    <div px-16rpx>
      <userModules :userInfo="userInfo" />
    </div>
    <div class="mine-order">
      <order ref="orderRef" />
    </div>

    <div class="mine-pin flex">
      <div
        class="pin-item"
        @click="navigateTo(item)"
        v-for="(item, index) in pinList"
        :key="index"
      >
        <div class="pin-item-value">{{ pin[item.key] }}</div>
        <div class="pin-item-label">{{ item.label }}</div>
      </div>
    </div>
    <tools class="mine-tools" />
  </div>
  <shop-tabbar></shop-tabbar>
</template>

<script setup lang="ts">
import { getCouponsNum, getFootprintNum, getUserWallet } from '@/api/member'
import userModules from '@/components/user/index-shop.vue'
import tools from '@/pages/tabbar/tools/index.vue'
import order from '@/pages/tabbar/tools/order.vue'
import { useStore } from '@/store'
import { isLogin, forceLogin } from '@/utils/filters'
import { onShow } from '@dcloudio/uni-app'
const store = useStore()
const orderRef = ref<any>(null)
const pin = ref<any>({
  couponNum: 0,
  footNum: 0,
  walletNum: 0
})

const userInfo = ref<any>({
  face: ''
})

const pinList = ref([
  {
    label: '预存款',
    key: 'walletNum',
    value: 0
  },
  {
    label: '优惠券',
    key: 'couponNum',
    value: 0
  },
  {
    label: '足迹',
    key: 'footNum',
    value: 0
  }
])

const navigateTo = (item: any) => {
  const navigateWay: any = {
    walletNum: '/pages/mine/wallet/balance',
    couponNum: '/pages/mine/coupon/achieved',
    footNum: '/pages/mine/tracks',
    refund: '/pages/mine/aftersale/list',
    evaluate: '/pages/mine/evaluation/center',
    pay: '/pages/mine/tracks',
    WAIT_PAY: '',
    WAIT_ROG: ''
  }

  uni.navigateTo({
    url: navigateWay[item.key]
  })
}

onShow(async () => {
  // 判断当前用户是否登录
  forceLogin()
  if (isLogin('auth')) {
    const user = await store.fetchUserInfo()
    if (user.data.success) {
      userInfo.value = user.data.result
      Promise.all([
        getCouponsNum(), //优惠券
        getFootprintNum(), //浏览数量
        getUserWallet() //预存款
      ]).then((res) => {
        pin.value.couponNum = res[0].data.result
        pin.value.footNum = res[1].data.result
        pin.value.walletNum = res[2].data.result.memberWallet
      })
      orderRef.value.init()
    }
  } else {
    userInfo.value = {}
  }
})
</script>
<style>
page {
  color: #333;
  font-weight: 400;
}

:root {
  --nut-card-left-background-color: #fff;
}
</style>
<style lang="scss" scoped>
.mine {
  padding: 32rpx 16rpx;
}

.min-recommend {
  background: #fff;
  padding: 16rpx;

  > .goods-item {
    margin: 10rpx 0;
  }
}

.flex {
  display: flex;
}

.mine-order,
.mine-pin {
  background: #fff;
  box-shadow: 6rpx 10rpx 24rpx rgba(126, 126, 126, 0.1);
  margin: 20rpx 0;
  border-radius: 24rpx;
  padding: 32rpx 16rpx;
}

.pin-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  > .pin-item-value {
    font-size: 32rpx;
    margin-bottom: 20rpx;
    font-weight: 600;
  }

  > .pin-item-label {
    font-size: 24rpx;
    font-weight: 600;
  }
}
</style>
